<!--
  底部组件（全局注册组件）
  navInd：导航的默认值
-->
<template>
  <footer class="index_footer">
    <nav>
      <!-- <a v-for="(item,index) in proData&&proData.home_bottom_nav.length>0&&proData.home_bottom_nav ||navNameList" @click="goTo(index)" :class="{'nav-bg':navInd == index}" :key="index">
          <i :class="'iconfont'+' '+iconList[index]"></i>
          <span>{{item.name}}</span>
        </a> -->
      <!-- <a v-for='(item, i) in proData&&proData.home_bottom_nav' :key='i' @click="goTo(i+1)" :class="{'nav-bg':navInd == i + 1}">
          <img :src="navInd == i + 1 ? item.activeImg : item.passiveImg" alt="">
          <span>{{item.txt}}</span>
        </a> -->
      <a
        v-for="(item,index) in proData&&proData.home_bottom_nav.length>0&&proData.home_bottom_nav ||navNameList"
        @click="goTo(index)"
        :class="{'nav-bg':navInd == index}"
        :key="index"
      >
        <img
          :src="api+item.icon"
          alt=""
        >
        <span>{{item.name}}</span>
      </a>
    </nav>
  </footer>
</template>

<script>
  import { mapGetters } from 'vuex';
  import { Secret } from '@/assets/commonjs/utils.js';

  export default {
    data() {
      return {
        navInd: 0,
        iconList: ['iconshouye1', 'iconqkk_icon_fuwu', 'iconshangcheng', 'iconlicai', 'iconqkk_icon_wode'],
        routeName: ['PanGold', 'Service', 'Shop', 'Dial', 'My'],
        navNameList: [
          {
            name: '首頁'
          },
          {
            name: '服務'
          },
          {
            name: '幸運轉盤'
          },
          {
            name: '我的'
          }
        ]
      }
    },
    mounted() {
      this.activeNav();
    },
    computed: {
      ...mapGetters(['proData', 'api'])
    },
    methods: {
      goTo(index) {
        this.navInd = index;
        if (index == 2) {
          const username = JSON.parse(Secret.decrypt(localStorage.getItem('userInfo'))).username
          location.href = `http://shop.weibozan.com/?token=${localStorage.getItem('cookie')}&username=${username}`
          return;
        }
        sessionStorage.setItem('btmNav', index);
        this.$router.push({ name: this.routeName[index] });
      },
      activeNav() {
        if (sessionStorage.getItem('btmNav')) {
          let index = sessionStorage.getItem('btmNav');
          this.navInd = index;
        }
      }
    }
  }

</script>
<style scoped lang="less">
  @import "~link-less";
  .index_footer {
    background-color: transparent;
    background-image: url(../assets/images/new/footer.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 150px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 16px;
    box-sizing: border-box;
  }
  nav {
    box-sizing: border-box;
    width: 100%;
    height: 100px;
    color: #ffffff;
    // background-color: #192848;
    background-color: transparent;
    .display-flex();
    justify-content: space-between;
    a {
      flex: 1;
      display: -webkit-flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      i {
        font-size: 20px;
      }
      img {
        width: 80px;
      }
    }
    .nav-bg {
      color: @font-primary-color;
    }
  }
</style>
